<template>
  <container-item-wrapper :widget="widget">
    <el-card
      :key="widget.id"
      class="card-container"
      :class="[!!widget.options.folded ? 'folded' : '', customClass]"
      :shadow="widget.options.shadow"
      :style="{ width: widget.options.cardWidth + '!important' || '' }"
      :ref="widget.id"
      v-show="!widget.options.hidden"
    >
      <template #header>
        <div class="clear-fix">
          <span>{{ widget.options.label }}</span>
          <i v-if="widget.options.showFold" class="float-right" @click="toggleCard">
            <template v-if="!widget.options.folded">
              <el-icon><ArrowDown /></el-icon>
            </template>
            <template v-else>
              <el-icon><ArrowUp /></el-icon>
            </template>
          </i>
        </div>
      </template>
      <template v-if="!!widget.widgetList && widget.widgetList.length > 0">
        <template v-for="(subWidget, swIdx) in widget.widgetList">
          <template v-if="'container' === subWidget.category">
            <component
              :is="getComponentByContainer(subWidget)"
              :widget="subWidget"
              :key="swIdx"
              :parent-list="widget.widgetList"
              :index-of-parent-list="swIdx"
              :parent-widget="widget"
            >
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($slots)" #[slot]="scope">
                <slot :name="slot" v-bind="scope"></slot>
              </template>
            </component>
          </template>
          <template v-else>
            <component
              :is="subWidget.type + '-widget'"
              :field="subWidget"
              :designer="null"
              :key="swIdx"
              :parent-list="widget.widgetList"
              :index-of-parent-list="swIdx"
              :parent-widget="widget"
            >
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($slots)" #[slot]="scope">
                <slot :name="slot" v-bind="scope"></slot>
              </template>
            </component>
          </template>
        </template>
      </template>
    </el-card>
  </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from '@/utils/i18n'
import refMixin from '@/components/variant-form3/form-render/refMixin'
import ContainerItemWrapper from '@/components/variant-form3/form-render/container-item/container-item-wrapper.vue'
import containerItemMixin from '@/components/variant-form3/form-render/container-item/containerItemMixin'
import FieldComponents from '@/components/variant-form3/form-designer/form-widget/field-widget/index'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'

export default {
  name: 'CardItem',
  componentName: 'ContainerItem',
  components: {
    ContainerItemWrapper,
    ...FieldComponents,
    ArrowDown,
    ArrowUp
  },
  mixins: [emitter, i18n, refMixin, containerItemMixin],
  inject: ['refList', 'sfRefList', 'globalModel'],
  props: {
    widget: Object
  },
  computed: {
    customClass() {
      return this.widget.options.customClass || ''
    }
  },
  created() {
    this.initRefList()
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    toggleCard() {
      // this.widget.options.folded = !this.widget.options.folded
      Vue.assign(this.widget.options, { folded: !this.widget.options.folded })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
  padding: 10px 12px;
}

.folded :deep(.el-card__body) {
  display: none;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: '';
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>
